<template>
    <div>
        <h1>欢迎进入嗨购app电商平台</h1>
        <div class="box">
            <p>嗨购App商品数已达：<span>{{ userdata }}</span>余件</p>
            <p>嗨购App注册人数已达：<span>{{ userlength }}</span>位</p>
        </div>
        <div class="home">
            <eatch></eatch>
            <eatch2></eatch2>
        </div>


    </div>
</template>

<script setup lang="ts">
import eatch from '../eatch/eatch.vue';
import eatch2 from "../eatch/1111.vue";
import { EventUsers, haigouuser } from "@/api/oper"
import { ref } from "vue"

const userdata = ref('')
const userlength = ref('')
const getEventGoodlist = () => {
    EventUsers().then(res => {
        if (res.data.code == "200") {
            userdata.value = res.data.data
        }
    })
}

const getUsers = () => {
    haigouuser().then(res => {
        if (res.data.code == "200") {
            userlength.value = res.data.data
        }
    })
}
getEventGoodlist()
getUsers()
</script>

<style scoped>
h1 {
    font-size: 20px;
    margin: 20px auto;
    font-weight: 700;
}

.home {
    display: flex;
    justify-content: space-around;
}
.box{
    font-size: 20px;
    margin: 10px;
    font-weight: 700;
}
.box span{
    color: red;
}
</style>